var picList = document.querySelector(".banner .wrapper .pic");
var selectorList = document.querySelector("#carousel-selectors");
var itemsWidth = picList.getElementsByTagName("li")[0].offsetWidth;

picList.style.transition = "transform 0.5s ease";
picList.style.transform = "translateX(0)";

// 轮播图切换方法
function carousel(index) {
  selectorList.querySelectorAll("li").forEach(function (li) {
    li.classList.remove("selected");
  });

  selectorList
    .querySelector('li[data-index="' + index + '"]')
    .classList.add("selected");

  picList.style.transform = "translateX(-" + index * itemsWidth + "px)";
}

//圆点点击
selectorList.addEventListener("click", function (e) {
  var target = e.target;
  if (target.matches("li")) {
    var index = parseInt(target.getAttribute("data-index"), 10);
    carousel(index);
  }
});

//设置轮播图自动播放
var carouselIndex = 0;
setInterval(function () {
  carouselIndex = (carouselIndex + 1) % picList.children.length;
  carousel(carouselIndex);
}, 3000);

